<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-tabs>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i> 运单信息</span>
            <el-form ref="form" :model="form" :rules="rules" label-width="130px">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>基本信息</span>
                </div>
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="运单号" prop="waybillNo">
                      <el-input v-model="form.waybillNo" placeholder="请输入运单号" disabled/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="承运商" prop="carrierId">
                      <el-select v-model="form.carrierId" placeholder="请选择承运商" clearable>
                        <el-option v-for="item in carrierOptions" :key="item.id" :label="item.carrierName"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="线路" prop="lineId">
                      <el-select v-model="form.lineId" placeholder="请选择线路" clearable>
                        <el-option v-for="item in lineOptions" :key="item.id" :label="item.name"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  </el-row>
                  <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="车次" prop="scheduleId">
                      <el-select v-model="form.scheduleId" placeholder="请选择车次" clearable>
                        <el-option v-for="item in schedultOptions" :key="item.id" :label="item.name"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="车牌号" prop="carId">
                      <el-select v-model="form.carId" placeholder="请选择车牌号" clearable>
                        <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="司机" prop="driverId">
                      <el-select v-model="form.driverId" placeholder="请选择司机" clearable>
                        <el-option v-for="item in driverOptions" :key="item.id" :label="item.personName"
                          :value="item.id" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="运单状态" prop="status">
                      <dict-tag :options="dict.type.tms_waybill_status" :value="form.status" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
              <el-card>
                <div slot="header" class="clearfix">
                  <span>物品信息</span>
                </div>
                <el-row>
                  <el-col>
                    <el-descriptions direction="vertical" :column="4" border style="margin-bottom: 15px;">
                      <el-descriptions-item label="物品数量">{{form.nums}}</el-descriptions-item>
                      <el-descriptions-item label="物品体积">{{form.volume}}</el-descriptions-item>
                      <el-descriptions-item label="物品重量">{{form.weight}}</el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-table :loading="true" :data="form.items" border stripe>
                      <el-table-column label="编号" prop="pno" />
                      <el-table-column label="名称" prop="name" />
                      <el-table-column label="数量" prop="nums" />
                    </el-table>
                  </el-col>
                </el-row>
              </el-card>

            </el-form>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-goods"></i> 物流跟踪</span>
            <el-row :gutter="15" style="margin-top: 10px;">
              <el-col :span="12">
                <el-card>
                  <div slot="header" class="clearfix">
                    <span>物流跟踪</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="12">
                 <amap-driving-line ref="amap"></amap-driving-line>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close()">取 消</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {
    listWaybill,
    getWaybill,
    delWaybill,
    addWaybill,
    updateWaybill
  } from "@/api/tms/waybill";
  import AmapDrivingLine from "@/components/AmapDrivingLine";
  import {listCarrier} from '@/api/tms/carrier';
  import {listSchedule} from '@/api/tms/schedule';
  import {listCar} from '@/api/tms/car';
  import {listDriver} from '@/api/tms/driver';
  import {listLines} from '@/api/tms/lines';
  // import {listUser} from '@/api/system/user'
  export default {
    name: "Waybill",
    components:{AmapDrivingLine},
    dicts: ['tms_waybill_status', 'sys_del_flag', 'tms_receipt_status'],
    data(){
      return{
        // 遮罩层
        loading: true,

        // 订单表格数据
        carrierOptions:[],
        lineOptions:[],
        schedultOptions:[],
        carOptions:[],
        driverOptions:[],
        // 表单参数
        form: {},

        // 表单校验
        rules: {
          deptId: [{
            required: true,
            message: "部门不能为空",
            trigger: "blur"
          }],
        }

      }
    },
    created() {
      this.getCarrier();
      this.getLines();
      this.getDriver();
      this.getCar();
      this.getSchedule();
      this.reset()
      const id = this.$router.currentRoute.params.id;
      if(id != undefined && id != ''){
        this.getWaybillInfo(id)
      }
    },
    methods:{
      getWaybillInfo(id){
         var  _this = this;
        getWaybill(id).then(response=>{
          console.info('response.data',response.data)
          _this.form = response.data;
        })
      },
      /** 查询部门下来数据 */
      getDept(){
        treeselect().then(response=>{
          this.deptOptions = response.data;
        })
      },
      /** 查询线路列表 */
      getCarrier(){
        listCarrier().then(response=>{
          this.carrierOptions = response.rows;
        })
      },
      /** 查询线路列表 */
      getLines(){
        listLines().then(response=>{
          this.lineOptions = response.rows;
        })
      },
      /** 查询车辆列表 */
      getCar(){
        listCar().then(response=>{
          this.carOptions = response.rows;
        })
      },
      /** 查询司机列表 */
      getDriver(){
        listDriver().then(response=>{
          this.driverOptions = response.rows;
        })
      },
      getSchedule(){
        listSchedule().then(response=>{
          this.schedultOptions = response.rows;
        })
      },
      /** 查询线路列表 */
      getUser(){
        listUser().then(response=>{
          this.userOptions = response.rows;
        })
      },
      lineChange(e){
        let linesOptions = this.lineOptions;
        linesOptions.forEach(item=>{
          if(item.id == e){
            this.form.dispatchId = item.dispatchId;
            this.form.pickupId = item.pickupId;
          }
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          orderNo: undefined,
          taskId: undefined,
          objId: undefined,
          fid: undefined,
          entrustNo: undefined,
          orderSerial: undefined,
          sourceType: undefined,
          status: "0",
          type: undefined,
          signTime: undefined,
          cancelTime: undefined,
          deliveryTime: undefined,
          deliveryType: undefined,
          arriveTime: undefined,
          memo: undefined,
          clientId: undefined,
          clientName: undefined,
          clientContacts: undefined,
          clientTel: undefined,
          sendAddress: undefined,
          sendContacts: undefined,
          sendDate: undefined,
          sendLat: undefined,
          sendLng: undefined,
          sendAddr: undefined,
          takeAddr: undefined,
          takeContacts: undefined,
          takeDate: undefined,
          takeTel: undefined,
          takeLat: undefined,
          takeLng: undefined,
          takeMemo: undefined,
          dispatcherId: undefined,
          lineId: undefined,
          lineName: undefined,
          driverId: undefined,
          driverName: undefined,
          driverPhone: undefined,
          carNumber: undefined,
          carId: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined
        };
        this.resetForm("form");
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateOrder(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addOrder(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close()
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/waybill",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
